@import (reference) "./../../shared/color";
@import (reference) "./../../shared/common";
@import (reference) "./../../tab-list/tab-list.component.less";
.pie-wrapper {
  background-color: @color-white;
  height: 100%;
  font-size: 1.2rem;
}

.flow-in-light {
  color: @color-red-light;
}

.flow-in-normal {
  color: @color-red-normal;
}

.flow-in-dark {
  color: @color-red-dark;
}

.flow-in-darker {
  color: #A30101;
  // color: @color-red-darker;
}

.flow-out-light {
  color: @color-green-light;
}

.flow-out-normal {
  color: @color-green-normal;
}

.flow-out-dark {
  color: @color-green-dark;
}

.flow-out-darker {
  color: @color-green-darker;
}

.legend {
  display: inline-block;
  width: 0;
  height: 1em;
  border-right: 1em solid;
  margin-right: 2px;
  vertical-align: middle;
  .transition();
}

.with-legend {
  &::before {
    content: "";
    .legend;
  }
}

.tab-list-primary {
  .cm-tab-list {
    .tab-list-link {
      padding: 4px 8px;
    }
  }
}

.chart-main {
  padding: @space-common/2, @space-common;
  overflow-y: auto;
  overflow-x: hidden;
  .display-flex(row, @align-items: center);
  .chart-pie {
    width: 40%;
    vertical-align: top;
    padding: @space-common;
    .flex;
  }
  .chart-legend {
    font-size: 1.2rem;
    width: 60%;
    margin-right: @space-common;
    .flex;
    th {
      text-align: right;
      white-space: nowrap;
    }
    td {
      width: 100px;
      white-space: nowrap;
    }
    table {
      border-collapse: collapse;
      tbody {
        tr {
          td {
            border: @border-simple;
            padding: 2px;
          }
        }
      }
    }
  }
}

.bg {
  .chart-main {
    .chart-pie {
      width: 30%;
    }
    .chart-legend {
      font-size: 1.2rem;
      width: 70%;
    }
    .chart-legend {
      font-size: 1.4rem;
    }
  }
}